<template>
  <div class="app-container">
    <el-empty description="加载中..." v-if="listLoading" />
    <el-empty v-else-if="!list.length" />
    <div style="height: 50px" v-else>
      <span class="top-tip" v-if="!step">注：该功能仅用于合作地块（非操盘项目），使用旧检查项版本检查时，得分录入使用！</span>
      <el-button icon="el-icon-back" @click="step = 0" v-else>返回版本</el-button>
    </div>

    <div class="trans-box">
      <transition name="trans1">
        <div class="list list1" v-show="!step">
          <el-card class="item" shadow="hover" v-for="(item, index) in list" :key="index" @click.native="nextStep(item)">
            <div class="icon-box">
              <svg-icon class="icon" icon-class="version" />
              <div class="code ellipsis2">{{ item.versionCode }}</div>
            </div>
            <div class="ver-name">{{ item.versionName }}</div>
          </el-card>
        </div>
      </transition>
      <transition name="trans2">
        <div class="list list2" v-show="step === 1">
          <el-card class="item" shadow="hover" v-for="(item, index) in list2" :key="index" @click.native="onItem(item)">
            <svg-icon class="icon" :icon-class="item.icon || 'build'" :style="{ color: item.iconColor || '#409eff' }" />
            <div class="ver-name">{{ item.chkitemName }}</div>
          </el-card>
        </div>
      </transition>
    </div>
  </div>
</template>
<script>
// 需选历史版本的检查项分类
import auth from '@/plugins/auth'
import { CQ_EVAL_CHKITEM_TYPE as CHKITEM_TYPE, CQ_EVAL_BUSS_BELONG as BUSS_BELONG } from '@/utils/baseData'
import { historyChkList } from '@/api/checkScore/cqEval'
export default {
  data() {
    return {
      listLoading: false,
      list: [], // 版本
      list2: [], // 检查项
      step: 0
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      const opt = {
        chkitemType: CHKITEM_TYPE.CHKITEMTYPE,
        bussBelong: BUSS_BELONG.CQHISTORY
      }
      this.listLoading = true
      const res = await historyChkList(opt).catch(() => false)
      this.listLoading = false
      if (res === false) return

      // 过滤启用且有权访问的检查项
      const list = res.data || []
      const data = list.filter(v => {
        if (!v.childList?.length) return
        v.childList = v.childList.filter(i => i.isEnable && i.permCode && auth.hasPermi(`cq:eval:${i.permCode}:list`))
        return v.childList.length
      })
      this.list = data
    },
    nextStep(item) {
      this.list2 = item.childList || []
      this.step = 1
    },
    onItem(item) {
      const { chkitemCode, specialRule } = item
      if (specialRule) return this.$router.push({ path: `/checkScore/specialRule/${chkitemCode}`, query: item })
      this.$router.push({ path: `/checkScore/chkitemScore/${chkitemCode}`, query: item })
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  height: 100%;
  background-color: #f8f8f8;
  padding: 20px 20px 0;
  overflow-y: auto;
}
.top-tip {
  font-size: 12px;
  color: #f56c6c;
}
.list {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  left: 0;
  transition: all 0.4s ease;
  .item {
    min-width: 180px;
    font-size: 20px;
    margin: 0 20px 20px 0;
    text-align: center;
    cursor: pointer;
  }
  .icon {
    width: 80px;
    height: 80px;
    transition: all 0.3s ease-in-out;
  }
  .ver-name {
    margin-top: 15px;
  }
}
.list1 {
  .item {
    &:hover .icon-box {
      transform: scale(1.15);
    }
    &:nth-child(7n + 1) {
      color: #b37feb;
    }
    &:nth-child(7n + 2) {
      color: #ff85c0;
    }
    &:nth-child(7n + 3) {
      color: #1890ff;
    }
    &:nth-child(7n + 4) {
      color: #95de64;
    }
    &:nth-child(7n + 5) {
      color: #ffc069;
    }
    &:nth-child(7n + 6) {
      color: #69c0ff;
    }
    &:nth-child(7n) {
      color: #5cdbd3;
    }
  }
  .icon-box {
    position: relative;
    width: 80px;
    display: inline-block;
    transition: all 0.3s ease-in-out;
  }
  .code {
    width: 46px;
    height: 46px;
    position: absolute;
    top: 15px;
    left: 21px;
    display: flex;
    align-items: center;
    font-size: 12px;
    word-break: break-all;
    transform: rotate(15deg);
  }
  .ver-name {
    color: #303133;
  }
}
.list2 {
  width: 100%;
  top: 0;
  .item:hover .icon {
    transform: scale(1.15);
  }
}

// 切换动画
.trans-box {
  position: relative;
  width: 100%;
  min-height: calc(100% - 50px);
  overflow: hidden;
}
.trans1-enter,
.trans1-leave-active {
  opacity: 0;
  left: -100%;
}
.trans2-enter-active {
  position: absolute;
  left: 100%;
}
.trans2-enter-to {
  position: absolute;
  left: 0;
}
.trans2-leave-active {
  position: absolute;
  opacity: 0;
  left: 100%;
}
</style>
